import React, {useState, useEffect} from 'react';
import {Col, Descriptions, Divider, Form, message, Modal, Row} from 'antd'
import {formatDate} from "@/tools/tool";
import SelectDuration from "@/components/Select/SelectDuration";
import SelectPackage from "@/components/Select/SelectPackage";
import Input from "antd/es/input/Input";
import {renewContract} from "@/services/contract";

const RenewContract = (props: any) => {
  const {visible, data, onClose, onOk} = props
  const [form] = Form.useForm()
  const [duration, SetDuration] = useState(null)
  useEffect(() => {
    if (visible) {
      form.resetFields()
    }
  }, [visible])
  const handleOk = () => {
    form.validateFields().then(values => {
      renewContract({...values, contractId: data.contract_id}).then(res => {
        if (res.status === 200) {
          onOk()
          message.success(res.message).then()
        } else {
          message.error(res.message).then()
        }
      })
    })
  }
  return (
    <Modal
      title={'续费'}
      visible={visible}
      onCancel={onClose}
      width={'50vw'}
      onOk={handleOk}
    >
      <Descriptions layout="vertical" bordered column={5} size={'small'}>
        <Descriptions.Item label="联系人">{data.linkman}</Descriptions.Item>
        <Descriptions.Item label="宽带账号">{data.account_number}</Descriptions.Item>
        <Descriptions.Item label="宽带密码">{data.account_password}</Descriptions.Item>
        <Descriptions.Item label="电话">{data.link_telephone}</Descriptions.Item>
        <Descriptions.Item label="套餐">{data.package_name}</Descriptions.Item>
        <Descriptions.Item label="通信地址">{data.detail_address}</Descriptions.Item>
        <Descriptions.Item label="开始时间">{formatDate(data.start_date)}</Descriptions.Item>
        <Descriptions.Item label="结束时间"><span
          style={{fontWeight: 'bold'}}>{formatDate(data.end_date)}</span></Descriptions.Item>
        <Descriptions.Item label="备注">{data.memo}</Descriptions.Item>
        <Descriptions.Item label="受理人">{data.operator}</Descriptions.Item>
      </Descriptions>
      <Divider orientation="left">账户续费</Divider>
      <Form form={form} labelCol={{span: 6}} wrapperCol={{span: 14}} autoComplete="off">
        <Row>
          <Col span={12}>
            <Form.Item label="计费周期">
              <SelectDuration onChange={e => SetDuration(e)}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="计费套餐" name="service_package" rules={[{required: true, message: '请选择计费套餐'}]}>
              <SelectPackage duration={duration}/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="备注" name="memo">
              <Input/>
            </Form.Item>
          </Col>
        </Row>

      </Form>
    </Modal>
  );
};

export default RenewContract;
